<template>
<div class="page flex_c" ref="canvasPage">
  <div class="title">代表你此刻心情的数字或者任意图案</div>
  <div class="draw flex_center">
		<canvas
			class="canvas"
			disable-scroll 
			type="2d" 
			ref="myCanvas"
			@touchstart="handleTouchstart"
			@touchmove="handleTouchmove"
			@touchend="handleTouchend"
			:style="canvasSty">
		</canvas>
  </div>
  <div class="flex_center mt-53">
    <div class="reset" @click="clearContext">重新绘制</div>
    <div class="reset pay_btn ml-11" @click="onNext">下一步</div>
  </div>
</div>
</template>

<script>
	export default {
		data() {
			return {
				canvasWidth: 294,
				canvasHeight: 385,
				// startX: '',
				// startY: '',
				top: 0,
				canvas: null,
				title: '',
				img: null
			}
		},
		
		computed: {
			canvasSty() {
				const {
					canvasWidth,
					canvasHeight
				} = this
				return {
					width: `${canvasWidth}px`,
					height: `${canvasHeight}px`
				}
			}
		},
		mounted() {
			this.initCanvas()
			let dom = this.$refs.canvasPage
			dom.addEventListener('touchmove', function (e) {
				e.preventDefault()
			}, { passive: false })
		},
		beforeDestroy() {

		},
		methods: {
			async initCanvas() {
				const canvas = this.$refs.myCanvas
				this.canvas = canvas
				this.ctx = canvas.getContext('2d')
				const dpr =  window.devicePixelRatio;
				canvas.width = this.canvasWidth * dpr
				canvas.height = this.canvasHeight* dpr
				this.ctx.scale(dpr, dpr)
				// 渲染图片
				this.ctx.fillStyle = 'blue';
				this.ctx.save();
				let { img } = await this.loadImg('http://content.daylucky.cn/admin/image/m64ff4by7wjss1xb37g6pt5t.png')
				this.img  = img
				// 椭圆区域
				this.ctx.beginPath()
				this.ctx.ellipse( this.canvasWidth / 2,  this.canvasHeight / 2 , this.canvasWidth / 2 - 3.5, this.canvasHeight / 2 - 2.2, 0, 0, Math.PI * 2)
				this.ctx.drawImage(img, 0, 0,  this.canvasWidth, this.canvasHeight)
				// this.ctx.stroke() // 只绘制边框
				// 保存和恢复上下文状态，防止后续操作影响当前状态 防止涂鸦后椭圆增加边框
				this.ctx.save();
				this.ctx.restore();			
				// 涂鸦不超过椭圆区域
				this.ctx.clip();
			},
			// 预加载图片
			loadImg(url) {
				const {
					canvas
				} = this
				return new Promise((resolve, reject) => {
					const img = new Image();			  
					img.src = url;
					img.onload = ()=> {
						resolve({ code: 200,	img })			  
					} 	
					img.onerror = () => {
						reject(` img error`)
					}
				})
			},
			handleTouchstart(e) {
				console.log(e.changedTouches, 'touchstart')
				const {x, y} = this.canvas.getBoundingClientRect() 
				this.lineBegin(e.changedTouches[0].clientX - x, e.changedTouches[0].clientY- y)
			},
			handleTouchmove(e) {
				const {x, y} = this.canvas.getBoundingClientRect() 
				this.lineTo(e.changedTouches[0].clientX - x, e.changedTouches[0].clientY - y)
			},
			handleTouchend() {
				this.ctx.closePath()
			},
			lineBegin(x, y) {
				this.ctx.beginPath()
				// 新版Canvas 2D接口，直接修改属性即可
				this.ctx.moveTo(x, y)
			},
			lineTo(x, y) {
				this.ctx.lineTo(x, y)
				this.ctx.stroke()
				this.ctx.lineJoin = 'round'
				this.ctx.lineWidth = 3
				this.ctx.strokeStyle = '#000'
				this.ctx.moveTo(x, y)
			},
			async clearContext() {
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.ctx.beginPath()
				this.ctx.drawImage(this.img, 0, 0,this.canvasWidth, this.canvasHeight )
			},
			onNext() {
				let owned = ''
				try {
					owned = JSON.parse(this.$route.query.owned)
				} catch (error) {
					owned = true
				}
      	this.$router.replace({ path: '/mirror/land', query: { owned }})
				// console.log(owned, this.owned, typeof this.owned,  typeof owned)
				// uni.reLaunch({
				// 	url: '/pages/land/index?owned=' + this.owned
				// })
			}
		}
	}
</script>	
<style lang="scss" scoped>
.page {
	width: 100%;
  height: 100vh;
  background: #fff;
  padding-bottom: 65px;
}
.title {
  font-family: pf_bold;
  // font-weight: 600;
  font-size: 16px;
  color: #000000;
  line-height: 29px;
  text-align: center;
  margin-bottom: 51px;
	margin-top: 45px;
}
.draw {
	width: 375px;
	height: 385px;
	// background: url(http://content.daylucky.cn/admin/image/m64ff4by7wjss1xb37g6pt5t.png) no-repeat left top/ 100% 100%;
	.canvas {
		width: 100%;
		height: 100%;
	}
}
.reset {
	width: 150px;
	height: 48px;
  font-family: pf_bold;
	border-radius: 48px;
	border: 1px solid #000000;
	font-size: 16px;
	line-height: 48px;
	color: #000000;
	text-align: center;
  &.pay_btn {
    background: #000000;
    color: #FFFFFF;
  }
}

	
</style>